<template>
    <div>
        <el-dialog :title="isAdd ? '添加菜单' : '编辑菜单'" :visible.sync="isshow" :before-close="cancel" center>
            <el-form ref="menuForm" :model="menuForm" :rules="rules">
                <el-form-item label="菜单名称" :label-width="formLabelWidth" prop="title">
                    <el-input autocomplete="off" v-model="menuForm.title"></el-input>
                </el-form-item>
                <el-form-item label="上级菜单" :label-width="formLabelWidth">
                    <el-select v-model="menuForm.pid" placeholder="请选择上级菜单" @change="changepid">
                        <el-option label="顶级菜单" :value="0"></el-option>
                        <el-option v-for="item in menulist" :key="item.id" :label="item.title" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label-width="formLabelWidth" label="菜单类型">
                    <el-radio disabled v-model="menuForm.type" :label="1">目录</el-radio>
                    <el-radio disabled v-model="menuForm.type" :label="2">菜单</el-radio>
                </el-form-item>
                <el-form-item  v-if="menuForm.type==1" :label-width="formLabelWidth" label="菜单图标">
                    <el-select  v-model="menuForm.icon">
                        <el-option v-for="item in iconlist" :key="item" :value="item" :label="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item  v-else label="菜单地址" :label-width="formLabelWidth">
                    <el-select  v-model="menuForm.url">
                        <el-option v-for="item in indexRoutes" :key="item.path" :value="item.path"
                            :label="item.meta.title"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="menuForm.status" active-color="#13ce66" inactive-color="#ff4949"
                        :active-value="1" :inactive-value="2"></el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="comfirm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { menuAdd, menuInfo, menuEdit } from '../../request/api'
//引入辅助性函数
import { mapActions, mapGetters } from "vuex";
// 引入路由组件
import { indexRouters } from '@/router';
export default {
    props: ['isshow', 'isAdd'],
    data() {
        return {
            menuForm: {
                pid: 0, //上级分类编号  注意：顶级菜单-0
                title: "", //菜单名称
                icon: "", //图标
                type: 1, //类型 1目录2菜单
                url: "", //菜单地址
                status: 1, //状态   1正常2禁用   number类型
            },
            formLabelWidth: "120px",
            indexRoutes: indexRouters,
            iconlist: [
                "el-icon-eleme",
                "el-icon-setting",
                "el-icon-star-on",
                "el-icon-star-off",
                "el-icon-place",
            ],
            rules: {
                title: [
                    // required必须的 必传项
                    { required: true, message: "请输入菜单名称", trigger: "blur" },
                    { min: 2, max: 6, message: "长度在 2 到 6 个字符", trigger: "blur" },
                ],
                pid: [{ required: true, message: "请选择上级菜单", trigger: "change" }],
            },
        };
    },
    computed: {
        ...mapGetters({
            menulist: "menu/getMenuList",
        }),
    },
    methods: {
        ...mapActions({
            getMenu: "menu/changeMenuAction",
        }),
        changepid(){
           this.menuForm.type = this.menuForm.pid==0?1:2
        },
        // 获取一条数据
        lookup(id) {
            menuInfo({ id })
                .then((res) => {
                    this.menuForm = res.data.list
                    this.menuForm.id = id
                })
        },
        // 封装一个确定事件
        comfirm() {
            this.$refs.menuForm.validate(async (flag) => {
                if (flag) {
                    if (this.isAdd) {
                        //    有就是添加   调用添加接口
                        let res = await menuAdd(this.menuForm)
                        console.log(res);
                        if (res.data.code == 200) {
                            this.$message.success(res.data.msg)
                            //  添加完后关闭弹框
                            this.cancel()
                            //重新触发行动
                            this.getMenu();
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    } else {
                        // 没有就是编辑 调用编辑接口
                        let res = await menuEdit(this.menuForm)
                        if (res.data.code == 200) {
                            this.$message.success(res.data.msg)
                            //  添加完后关闭弹框
                            this.cancel()
                            //重新触发行动
                            this.getMenu();
                        } else {
                            this.$message.error(res.msg);
                        }
                    }
                } else {
                    console.log("验证失败");
                }
            })
        },
        //    封装一个取消事件
        cancel() {
            this.$emit('cancel', false)
            this.reset();
        },
        reset() {
            //清空输入内容
            this.menuForm = {
                pid: 0, //上级分类编号  注意：顶级菜单-0
                title: "", //菜单名称
                icon: "", //图标
                type: 1, //类型 1目录2菜单
                url: "", //菜单地址
                status: 1, //状态   1正常2禁用   number类型
            };
            // 清空规则
            // resetFields	对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
            this.$refs.menuForm.resetFields();
        },
    }
};
</script>

<style  lang="" scoped>

</style>
